<template>
  <div class="users-container">
    <el-card class="box-card" shadow="hover">
      <el-button type="primary" @click="addUserDialog = true" plain>添加</el-button>
      <el-table
        v-loading="loading"
        element-loading-text="Loading..."
        :element-loading-spinner="svg"
        element-loading-svg-view-box="-10, -10, 50, 50"
        :header-cell-style="{textAlign:'center'}"
        :cell-style="{textAlign:'center'}"
        :data="tableData"
        style="width: 100%"
      >
        <el-table-column fixed prop="username" label="账号" width="100" />
        <el-table-column prop="avatar" label="头像" width="150">
          <template #default="scope">
            <el-avatar shape="square" :size="40" :src="scope.row.avatar"/>
          </template>
        </el-table-column>
        <el-table-column prop="userNike" label="用户名称&联系方式" width="180">
          <template #default="scope">
            <el-popover effect="light" trigger="hover" placement="top" width="auto">
              <template #default>
                <el-descriptions title="联系方式" :column="1" size="small" border>
                  <el-descriptions-item label="电话号码">{{ scope.row.telephone }}</el-descriptions-item>
                  <el-descriptions-item label="电子邮箱">{{ scope.row.email }}</el-descriptions-item>
                </el-descriptions>
              </template>
              <template #reference>
                {{ scope.row.userNike }}
              </template>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column prop="sex" label="性别" width="100">
          <template #default="scope">
            <el-tag v-if="scope.row.sex === 1"><el-icon><male /></el-icon>男</el-tag>
            <el-tag type="danger" v-else><el-icon><female /></el-icon>女</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="200" />
        <el-table-column prop="status" label="账号状态" width="180">
          <template #default="scope">
            <el-popover effect="light" trigger="hover" placement="top" width="auto">
              <template #default>
                <el-descriptions title="登录信息" :column="1" size="small" border>
                  <el-descriptions-item label="最后登录IP">{{ scope.row.loginIp }}</el-descriptions-item>
                  <el-descriptions-item label="最后登录时间">{{ scope.row.loginDate }}</el-descriptions-item>
                </el-descriptions>
              </template>
              <template #reference>
                <el-tag type="success" v-if="scope.row.status == 1">正常</el-tag>
                <el-tag type="danger" v-else>禁用</el-tag>
              </template>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="居住地址" width="260"/>
        <el-table-column fixed="right" label="操作" width="100">
          <template #default="scope">
            <el-button
              type="danger"
              size="small"
              @click="deleteRow(scope.$index)"
            >
              Delete
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <el-pagination
        small
        background
        layout="prev, pager, next"
        :hide-on-single-page="true"
        :page-size="pagerInfo.pageSize"
        :total="pagerInfo.total"
        class="mt-4 pagination"
        @current-change="pageChange"
        @prev-click="pageChange"
        @next-click="pageChange"
      />
    </el-card>
  </div>

  <!-- 添加用户的表单弹窗 -->
  <el-dialog v-model="addUserDialog" title="添加新用户" :close-on-press-escape="false" :close-on-click-modal="false">
    <el-form
      label-width="100px"
      ref="userForm"
      :rules="userRule"
      :model="addUserForm">
      <el-form-item label="用户账号" prop="username">
        <el-input v-model="addUserForm.username" />
      </el-form-item>
      <el-form-item label="用户昵称" prop="userNike">
        <el-input v-model="addUserForm.userNike" />
      </el-form-item>
      <el-form-item label="设置密码" prop="password">
        <el-input type="password" v-model="addUserForm.password" />
      </el-form-item>
      <el-form-item label="性别" prop="sex">
        <el-radio v-model="addUserForm.sex" label="1" border>男</el-radio>
        <el-radio v-model="addUserForm.sex" label="0" border>女</el-radio>
      </el-form-item>
      <el-form-item label="手机号码" prop="telephone">
        <el-input v-model="addUserForm.telephone" />
      </el-form-item>
      <el-form-item label="电子邮箱" prop="email">
        <el-input v-model="addUserForm.email" />
      </el-form-item>
      <el-form-item label="居住地址" prop="address">
        <el-input v-model="addUserForm.address" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="submit">提交</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ElMessage } from 'element-plus'
import { UserList, CreateUser } from '@/api/users'
import { DateFormat } from '@/utils/CommonFun.js'
import { addUserFormRule } from '@/datas/rules/users'
import { svg } from '@/datas/loading'
import { ref } from 'vue'

// 表格信息
const tableData = ref([])
const getUserList = (pageNum) => {
  UserList({ pageSize: 8, pageNum })
    .then(data => {
      pagerInfo.value.total = data.userListPage.total
      pagerInfo.value.pageSize = data.userListPage.size
      // 对表格中的日期进行格式的转换
      data.userListPage.records.forEach(item => {
        item.avatar = process.env.VUE_APP_BASE_API + item.avatar
        // 如果登录ip为空, 那么就是新创建的用户
        if (!item.loginIp) {
          item.loginIp = '新创建用户'
          item.loginDate = '新创建用户'
        } else {
          item.loginDate = DateFormat.format(item.loginDate)
        }
        item.createTime = DateFormat.format(item.createTime)
      })
      tableData.value = data.userListPage.records
      loading.value = false
    })
}
getUserList(1)

// 数据加载状态的遮蔽罩
const loading = ref(true)

// 分页器的数据及逻辑
const pagerInfo = ref({
  total: 1,
  pageSize: 10
})
const pageChange = (pageNum) => {
  loading.value = true
  getUserList(pageNum)
}

// 新增用户的逻辑
const addUserDialog = ref(false)
const userForm = ref(null)
const userRule = ref(addUserFormRule)
const addUserForm = ref({
  username: '',
  userNike: '',
  password: '',
  sex: '1',
  email: '',
  telephone: '',
  address: ''
})
const cancel = () => {
  // 对表单数据进行重置
  userForm.value.resetFields()
  addUserDialog.value = false
}
const submit = async () => {
  if (!userForm.value) return
  await userForm.value.validate((valid, fields) => {
    if (valid) {
      CreateUser(addUserForm.value)
        .then(data => {
          // 重新获取列表
          getUserList(1)
          addUserDialog.value = false
        })
    } else {
      return false
    }
  })
}

// 操作按钮的删除
const deleteRow = (row) => {
  ElMessage({
    message: '很抱歉暂时没有该功能',
    type: 'info'
  })
}
</script>

<style lang="scss" scoped>
.users-container{
  .pagination{
    margin-top: 18px;
  }
}
</style>
